<template>
  <div>
     <el-form :model="user" :rules="rules" ref="loginForm" class="login-form">
       <h1>系统登录</h1>
  <el-form-item prop="username">
    <el-input type="text" v-model="user.username" placeholder="请输入用户名"></el-input>
  </el-form-item>
 <el-form-item prop="password">
    <el-input type="password" v-model="user.password" placeholder="请输入密码"></el-input>
  </el-form-item>
  
  <el-form-item >
   <el-checkbox v-model="user.checked" label="记住密码" ></el-checkbox>
  </el-form-item>
  <el-form-item >
      <el-button class="login-button" type="primary" @click="handleLogin" >登录</el-button>
      <el-button   @click="handleReset" >重置</el-button>
    </el-form-item>
</el-form>

<!-- 验证码 -->
      <Vcode
        :show="isShow"
        @success="success"
        @close="close"
        :canvasWidth="500"
        :canvasHeight="350"
      />
      <el-dialog title="提示" :visible.sync="dialogVisible" width="45%">
        <span>
            《新冠-物资管理系统》 该项目后端采用SpringBoot，Shiro，通用Mapper开发API接口，
            前端使用当今较为流行的Vue.js。
        </span>
            <el-table border :data="user" style="width: 100%">
              <el-table-column prop="username" label="账号" width="180"></el-table-column>
              <el-table-column prop="password" label="密码" width="180"></el-table-column>
              <el-table-column prop="address" label="描述"></el-table-column>
            </el-table>
            <span slot="footer" class="dialog-footer">
            <el-button type="primary" @click="dialogVisible = false">去登入</el-button>
        </span>
      </el-dialog>
  </div>
</template>

<script>
import Vcode from "vue-puzzle-vcode";
export default {
    name:"Login",
    components: {
      Vcode
    },
    data() {
      return {
        isShow: false,
        // dialogVisible: false,
        user: {
        username:"",
        password:'',
        checked:"false"
        },
        rules: {
          username: [
            { required: true, message: '请输入用户名', trigger: 'blur' },
            { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
          ],
          password:[
            { required: true, message: '请输入密码', trigger: 'blur' },
            { min: 1, max: 12, message: '长度在 1 到 12 个字符', trigger: 'blur' }
          ]
        }
      };
    },
    mounted(){
      let checked = JSON.parse(localStorage.getItem("checked"))
      this.user.checked = checked
      this.user.username = localStorage.getItem("username")
      this.user.password = localStorage.getItem("password")
    },
    methods: {
      //登录
       handleLogin() {
        this.$refs.loginForm.validate(async (valid) => {
        if (valid) {
          this.isShow = true;
         
          } else {
            console.log("验证不通过");
            return false;
          }
        });
      },
    //CLOSE
    close(){
      this.isShow = false;
    },
    //success
    async success(){
            let res =  await this.$http.post("/user/login?username="+this.user.username+"&password="+this.user.password);
            console.log(res)
            if(res.data.code===200){
              this.$message({
                message: "登录成功",
                type: 'success'
              });
                localStorage.setItem("JWT_TOKEN",res.data.data)
                localStorage.setItem("username",this.user.username)
            
              if(this.user.checked){
                  localStorage.setItem("password",this.user.password)
                  localStorage.setItem("checked",this.user.checked)
              }else{
                  localStorage.removeItem("password")
                  localStorage.removeItem("checked")
              }
              this.$router.replace("/welcome")
            }else{
              this.$message({
                message:"数据传输错误",
                type: 'warning'
              });
            }
    },
    //重置
    handleReset(){
      this.user = {}  
      localStorage.clear()
    } 
  }
}
</script>

<style lang="less" scoped>
    .login-form{
      width: 500px;
      height: 400px;
      margin: 250px auto;
      border: 1px solid #eee;
      padding: 30px;
      background-color: #fff;
      h1{
        // text-align: center;
        font-size: 30px;
        margin-bottom:20px;
      }
      .login-button{
       margin-left: 300px;
      }
    }
</style>>
